<template>
  <div class="tencentMap">
    <div id="tencentMap"
         class="container"></div>
  </div>
</template>

<script>

export default {
  name: 'tencent',
  components: {},
  data () {
    return {
      markerLayer: {},
      map: {},
    };
  },
  watch: {},
  methods: {
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap () {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(39.984120, 116.307484)
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new window.TMap.Map(document.getElementById('tencentMap'), {
        center: center, // 地图的中心地理坐标。
        zoom: 8 // 地图的中心地理坐标。
      })
    },
    initMap2 () {
      console.log("window", window);
      // 定义地图中心点坐标
      let center = new window.TMap.LatLng(31.271694, 118.362938);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      let map = new window.TMap.Map(document.getElementById("tencentMap"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
      //如果不给地图添加坐标点,这里可以忽略了,如果要添加请继续看(重点关注***markerLayer***)
      this.map = map;
      map.on("click", (e) => {
        this.markerLayer.setGeometries([]);
        const position = e.latLng;
        this.addImgMarker(position);
      });
    },
    addImgMarker (data) {
      this.markerLayer = new TMap.MultiMarker({
        map: this.map,
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素）
            src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 },
          }),
        },
        //点标记数据数组
        geometries: [
          {
            id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: "myStyle", //指定样式id
            position: data, //点标记坐标位置
          },
        ],
      });
    }
  },
  created () { },
  mounted () {
    this.markerLayer = new TMap.MultiMarker({});
    this.initMap()
  },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.tencentMap {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
  }
}
</style>